<script setup>
import { ref } from 'vue'
import { useHealthStore } from '../stores/healthStore'

const store = useHealthStore()
const activeTab = ref('exercise')

const exerciseForm = ref({
  type: '跑步',
  duration: 30,
  date: new Date().toISOString().split('T')[0]
})

const dietForm = ref({
  food: '',
  calories: '',
  date: new Date().toISOString().split('T')[0]
})

const sleepForm = ref({
  duration: 7,
  quality: '良好',
  date: new Date().toISOString().split('T')[0]
})

const submitExercise = () => {
  store.addExercise({
    ...exerciseForm.value,
    duration: Number(exerciseForm.value.duration)
  })
  alert('运动记录已保存！')
  exerciseForm.value.duration = 30
}

const submitDiet = () => {
  store.addDiet({
    ...dietForm.value,
    calories: Number(dietForm.value.calories)
  })
  alert('饮食记录已保存！')
  dietForm.value.food = ''
  dietForm.value.calories = ''
}

const submitSleep = () => {
  store.addSleep({
    ...sleepForm.value,
    duration: Number(sleepForm.value.duration)
  })
  alert('睡眠记录已保存！')
  sleepForm.value.duration = 7
}
</script>

<template>
  <div class="input-view">
    <h1>记录健康数据</h1>
    
    <div class="tabs">
      <button 
        :class="{ active: activeTab === 'exercise' }" 
        @click="activeTab = 'exercise'">
        运动记录
      </button>
      <button 
        :class="{ active: activeTab === 'diet' }" 
        @click="activeTab = 'diet'">
        饮食记录
      </button>
      <button 
        :class="{ active: activeTab === 'sleep' }" 
        @click="activeTab = 'sleep'">
        睡眠记录
      </button>
    </div>
    
    <div class="form-container">
      <!-- 运动记录表单 -->
      <form v-if="activeTab === 'exercise'" @submit.prevent="submitExercise">
        <div class="form-group">
          <label>运动类型</label>
          <select v-model="exerciseForm.type" required>
            <option value="跑步">跑步</option>
            <option value="游泳">游泳</option>
            <option value="骑行">骑行</option>
            <option value="健身">健身</option>
            <option value="瑜伽">瑜伽</option>
            <option value="篮球">篮球</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>时长（分钟）</label>
          <input 
            type="number" 
            v-model.number="exerciseForm.duration" 
            min="1" 
            max="240" 
            required>
        </div>
        
        <div class="form-group">
          <label>日期</label>
          <input 
            type="date" 
            v-model="exerciseForm.date" 
            required>
        </div>
        
        <button type="submit">保存记录</button>
      </form>
      
      <!-- 饮食记录表单 -->
      <form v-if="activeTab === 'diet'" @submit.prevent="submitDiet">
        <div class="form-group">
          <label>食物名称</label>
          <input 
            type="text" 
            v-model="dietForm.food" 
            placeholder="例如：鸡胸肉沙拉" 
            required>
        </div>
        
        <div class="form-group">
          <label>卡路里（大卡）</label>
          <input 
            type="number" 
            v-model.number="dietForm.calories" 
            min="1" 
            max="2000" 
            required>
        </div>
        
        <div class="form-group">
          <label>日期</label>
          <input 
            type="date" 
            v-model="dietForm.date" 
            required>
        </div>
        
        <button type="submit">保存记录</button>
      </form>
      
      <!-- 睡眠记录表单 -->
      <form v-if="activeTab === 'sleep'" @submit.prevent="submitSleep">
        <div class="form-group">
          <label>睡眠时长（小时）</label>
          <input 
            type="number" 
            v-model.number="sleepForm.duration" 
            min="1" 
            max="12" 
            step="0.5" 
            required>
        </div>
        
        <div class="form-group">
          <label>睡眠质量</label>
          <select v-model="sleepForm.quality" required>
            <option value="极好">极好</option>
            <option value="良好">良好</option>
            <option value="一般">一般</option>
            <option value="较差">较差</option>
            <option value="很差">很差</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>日期</label>
          <input 
            type="date" 
            v-model="sleepForm.date" 
            required>
        </div>
        
        <button type="submit">保存记录</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.input-view {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  color: #2c3e50;
  margin-bottom: 25px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.tabs button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: #f0f4f8;
  color: #555;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tabs button:hover {
  background: #e3e9f0;
}

.tabs button.active {
  background: #3498db;
  color: white;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.form-container {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 25px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
}

input, select {
  width: 100%;
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border 0.3s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

button[type="submit"] {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s ease;
}

button[type="submit"]:hover {
  background: #43A047;
}
</style>